<template>
	<view>

		<view class="bg-white" style="min-height: 800px;">
			<scroll-view id="nav-bar" scroll-x class="nav margin-top">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :id="'tab'+index" v-for="(item,index) in tabBars" :key="item.id" :class="index==tabCurrentIndex?'text-yellow cur':''"
					 @tap="changeTab(index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<!-- 下拉刷新组件 -->
			<!-- <mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh"
			 @setEnableScroll="setEnableScroll"> -->
			<!-- 内容部分 -->
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
				<swiper-item v-for="tabItem in tabBars" :key="tabItem.id">

					<!-- tab1 主页-->
					<view class="category-main  " v-if="tabItem.id==1">

						<view class="depth  ">
							<view class="depth-head">
								<view class="depth-head-left">
									<view class="depth-head-label depth-head-left-index">{{i18n.contract.buyp}}</view>
									<view class="depth-head-label">{{i18n.contract.hand}}{{salename}})</view>
								</view>
								<view class="depth-head-center">
									<view class="depth-head-label">{{i18n.contract.price}}(USDT)</view>
								</view>
								<view class="depth-head-right">
									<view class="depth-head-label">{{i18n.contract.hand}}({{salename}})</view>
									<view class="depth-head-label depth-head-right-index">{{i18n.contract.sellp}}</view>
								</view>
							</view>
							<view class="depth-main">
								<view class="depth-main-item ">
									<view class="dmi-cell" style="justify-content: flex-end;" v-for="(item,index) in buyList ">
										<view class="dmi-cell-bg" style="background-color: rgba(44, 197, 153, 0.1);" :style="[{ width:item.num/buynummax*100+'%'}]"></view>
										<view class="dmi-cell-item">
											<view class="dmi-cell-index">{{index+1}}</view>
											<view class="dmi-cell-num">{{item.num}}</view>
											<view class="dmi-cell-price" style="padding-right: 5px;">{{item.price}}</view>
										</view>
									</view>
								</view>
								<view class="depth-main-item ">
									<view class="dmi-cell" v-for="(item,index) in saleList">
										<view class="dmi-cell-bg" style=" background-color: rgba(255, 0, 0, 0.1);" :style="[{ width:item.num/salenummax*100+'%'}]"></view>
										<view class="dmi-cell-item">
											<view class="dmi-cell-price" style="padding-left: 5px;">{{item.price}}</view>
											<view class="dmi-cell-num" style="text-align: right;">{{item.num}}</view>
											<view class="dmi-cell-index" style="text-align: right;">{{index+1}}</view>
										</view>
									</view>

								</view>
							</view>

						</view>

					</view>
					<!-- tab1 end -->

					<!-- tab2 账户-->
					<view class="transaction  " v-if="tabItem.id==2">
						<view class="transaction-head">
							<view class="transaction-head-item tmc-time">{{i18n.kline.time}}</view>
							<view class="transaction-head-item tmc-type">{{i18n.order.direction}}</view>
							<view class="transaction-head-item tmc-price">{{i18n.trade.price}}</view>
							<view class="transaction-head-item tmc-num">{{i18n.trade.number}}</view>
						</view>
						<view class="transaction-main">
							<view class="transaction-main-cell"  v-for="(item,index) in  transaction">
								<text class="tmc-label tmc-time">{{item.time}}</text>
								<text class="tmc-label tmc-type" :class="item.direction>0?'text-green':'text-red'">{{item.direction>0?i18n.trade.buy:i18n.trade.sale}}</text>
								<text class="tmc-label tmc-price">{{item.price}}</text>
								<text class="tmc-label tmc-num">{{item.num}}</text>
							</view>
						</view>
					</view>
					<!-- tab2 end-->

					<!-- tab3 交易 -->

					<view class="introduction" v-if="tabItem.id==3">
						<view class="introduction-name">XXX</view>
						<view class="introduction-cell"><text class="introduction-cell-label">发行时间</text> <text class="introduction-cell-value">2020-06-15</text></view>
						<view class="introduction-cell"><text class="introduction-cell-label">发行总量</text> <text class="introduction-cell-value">1000000000</text></view>
						<view class="introduction-cell"><text class="introduction-cell-label">流通总量</text> <text class="introduction-cell-value">--</text></view>
						<view class="introduction-cell"><text class="introduction-cell-label">众筹价格</text> <text class="introduction-cell-value">--</text></view>
						<view class="introduction-cell"><text class="introduction-cell-label">白皮书</text> <text class="introduction-cell-value">--</text></view>
						<view class="introduction-cell"><text class="introduction-cell-label">官网</text> <text class="introduction-cell-value">--</text></view>
						<view class="introduction-cell"><text class="introduction-cell-label">区块查询</text> <text class="introduction-cell-value">--</text></view>
						<view class="introduction-label">简介</view>
						<view class="introduction-value">--</view>
					</view>



					<!-- tab3 end-->


				</swiper-item>
			</swiper>
			<!-- </mix-pulldown-refresh> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			mixLoadMore
		},
		props: {
			salename: {
				type: String ,
				default: () => {
					return 'BTC'
				}
			}, 
			close: {
				type: Number ,
				default: () => {
					return 0
				}
			}, 
		},
		data() {
			return {
				leader: {},
				hadgg: [], //已经关注
				hadgs: [], //已经跟随
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引 
 
				ptype1: 'wall2',
				ptype2: 'wall1', 
				buyList: [],
				saleList: [],
				transaction: [],
				buynummax: 1,
				salenummax: 1,
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			},
			hasLogin() {
				return this.userinfo.id ? true : false
			},
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadTabbars();
			
			// this.sim()
			this.tradetimer = setInterval((e) => {
				this.sim()
			}, 1000);
		},
		destroyed() {
			clearInterval(this.tradetimer)
		},
		methods: {
			tradetimer() {},
			init() {
				this.getattention()
				this.getfollow()
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			sim() {
				if (this.ptype1 !== 'wall10') {
					//模拟行情 委托单
					let nowprice = this.close;
					let nowtime = new Date
					let wei=nowprice.toString().split(".")[1].length
					console.log(Math.ceil(Math.random()*10-5))
					let a = [];
					let b = [];
					let c = [];
					let offset = nowprice * 0.3 * Math.random();
					let cc = 1;
					for (let i = 0; i < 50; i++) {
						a[i] = {
							'price': (nowprice - offset * i * 0.01).toFixed(wei),
							'num': Math.round(Math.random() * 10000 * cc)
						}
					}
					for (let k = 0; k < 50; k++) {
						b[k] = {
							'price':(nowprice + offset * k * 0.01).toFixed(wei),
							'num': Math.round(Math.random() * 10000 * cc)
						}
					}
					for (let k = 0; k < 50; k++) {
						c[k] = {
							'price': (nowprice + offset *  Math.ceil(Math.random()*10-5) * 0.01).toFixed(wei),
							'num': Math.round(Math.random() * 10000 * cc),
							'time': nowtime.Format('M-d h:m:s'),
							'direction': Math.ceil(Math.random()*10-5)
						}
					}
					this.saleList = b;
					this.buyList = a;
					this.getmax(this.buyList, 'buy');
					this.getmax(this.saleList, 'sale');
					this.transaction = c
				} else {
					//真实行情 委托单
					let send = {
						ptype1: this.ptype1,
						ptype2: this.ptype2,
					}
					this.$http.post('trade.buylist', send).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.saleList = res.data.salelist;
							this.buyList = res.data.buylist;
							this.getmax(this.buyList, 'buy');
							this.getmax(this.saleList, 'sale');
						}
					})
				}
			},
			getmax(list, type) {
				var arr = [];
				for (var i = 1; i < list.length; i++) {
					arr.push(list[i]['num']);
				}
				if (type == 'buy') {
					this.buynummax = Math.max(...arr);
				} else {
					this.salenummax = Math.max(...arr);
				}
			},

			//获取分类
			loadTabbars() {
				console.log(this.i18n.order.tab1)
				let tabList = [{
					name: this.i18n.contract.depth,
					id: '1',
					uri: ''
				}, {
					name: this.i18n.contract.transaction,
					id: '2',
					uri: ''
				}, 
				// {
				// 	name: '简介',
				// 	id: '3',
				// 	uri: ''
				// },
				];
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.page = 1;
				})
				this.tabBars = tabList;
				this.loadNewsList('add');
			},
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//列表
			loadNewsList(type) {
				let tabItem = this.tabBars[this.tabCurrentIndex];
				console.log(type)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					tabItem.page = 1;
				}
				// 请求数据
				let send = {
					page: tabItem.page
				};
				if (tabItem.id == 3) {
					send.user_id = this.leader.user_id
				}
				if (tabItem.id == 4) {
					send.id = this.leader.id
				}

				this.$http.post(tabItem.uri, send).then(res => {
					let list = res.data.data;
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						tabItem.newsList.push(item);
					})

					tabItem.loadMoreStatus = res.data.current_page >= res.data.last_page ? 2 : 0;
					tabItem.page += 1;
				})

			},
			//tab切换
			async changeTab(e) {

				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;

					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
						this.loadNewsList('add');
						tabItem.loaded = true;
					}
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
		},
		onLoad(option) {

			if (this.hasLogin) {
				this.init()
			}
			// setTimeout(() => {
			// 	uni.setNavigationBarTitle({
			// 		title: data.name + '/' + data.priceUnit
			// 	});
			// }, 800)

		},
	}
</script>

<style lang="scss">
	.botton-b {
		width: 100%;
		height: 38px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.cu-card .title {
		width: 28%;
	}

	.cu-card .title2 {
		width: 70px;
	}

	.trade_1 {
		position: absolute;
		left: 18px;
	}

	.tit {
		font-weight: 600;
		font-size: 16px;
	}

	.row {
		display: inline;
	}

	.bai {
		padding: 6px 12px;
		border-radius: 8px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid.no-border {
		padding: 3px 17px;
	}

	.nav .cu-item {
		border: none;
	}


	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.depth {
		margin-top: 10px;
	}

	.depth-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.depth-head-left {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.depth-head-center {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.depth-head-right {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.depth-head-label {
		font-size: 10px;
		color: $font-color-dark;
	}

	.depth-head-left-index {
		width: 30px;
		margin-right: 10px;
		text-align: left;
	}

	.depth-head-right-index {
		width: 30px;
		margin-left: 10px;
		text-align: right;
	}

	.depth-main {
		margin-top: 15px;
		display: flex;
		flex-direction: row;
	}

	.depth-main-item {
		flex: 1;
	}

	.dmi-cell {
		position: relative;
		height: 30px;
		display: flex;
		flex-direction: row;
	}

	.dmi-cell-item {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.dmi-cell-item-right {
		justify-content: flex-end;
	}

	.dmi-cell-bg {
		background-color: red;
		width: 0;
		height: 100%;
	}

	.dmi-cell-index {
		width: 30px;
		font-size: 12px;
		color: $font-color-dark;
	}

	.dmi-cell-num {
		flex: 1;
		margin: 0 10px;
		font-size: 12px;
		color: $font-color-dark;
	}

	.dmi-cell-price {
		font-size: 12px;
		color: $font-color-dark;
	}

	.transaction {
		margin-top: 10px;
	}

	.transaction-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.transaction-head-item {
		color: $font-color-dark;
		font-size: 10px;
	}

	.transaction-main {
		margin-top: 10px;
	}

	.transaction-main-cell {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tmc-label {
	 
		font-size: 12px;
		height: 30px;
		line-height: 30px;
	}

	.tmc-time {
		width: 30%;
	}

	.tmc-type {
		text-align: center;
		width: 20%;
	}

	.tmc-price {
		text-align: center;
		width: 20%;
	}

	.tmc-num {
		text-align: right;
		width: 30%;
	}

	.introduction {}

	.introduction-name {
		color: $font-color-dark;
		font-size: 16px;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.introduction-cell {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.introduction-cell-label {
		color: $font-color-dark;
		font-size: 12px;
	}

	.introduction-cell-value {
		color: $font-color-dark;
		font-size: 12px;
		font-weight: bold;
	}

	.introduction-label {
		margin-top: 40px;
		color: $font-color-dark;
		font-size: 16px;
		font-weight: bold;
	}

	.introduction-value {
		margin-top: 20px;
		color: $font-color-dark;
		font-size: 14px;
	}
</style>
